<template>
  <div class="acc_add_box">
    <div class="acc_add">
      <el-form :model="form" label-width="120px">
        <el-form-item label="医务账号">
          <el-input
            v-model="form.account"
            placeholder="请输入账号名/手机号/邮箱"
            clearable
          />
        </el-form-item>
        <el-form-item label="账号权限">
          <el-select v-model="form.purview" placeholder="">
            <el-option label="医生" value="医生" />
            <el-option label="护士" value="护士" />
            <el-option label="医务管理员" value="医务管理员" />
            <el-option label="实习助理" value="实习助理" />
            <el-option label="药房" value="药房" />
          </el-select>
        </el-form-item>
        <el-form-item label="医务密码">
          <el-input
            v-model="form.password"
            type="password"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="form.password2"
            type="password"
            show-password
            placeholder="请确认密码"
          />
        </el-form-item>
        <el-form-item label="医务姓名">
          <el-input
            v-model="form.name"
            placeholder="请输入该医务人员姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="form.idcard"
            placeholder="请输入医务人员身份证号"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.phone"
            type="number"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item>
        <el-form-item label="上传照片">
          <el-upload
            class="avatar-uploader"
            action="http://129.211.169.131:21001/users/uploadheader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认创建</el-button>
          <el-button type="info">返回上一级</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { usersAddReq } from "@/api/user.api";
import type { UploadProps } from "element-plus";
//表单参数
const form = reactive({
  account: "",
  purview: "",
  password: "",
  password2: "",
  name: "",
  sex: "",
  idcard: "",
  phone: "",
  head: "",
});
// 图片值
const imageUrl = ref("");
//图片上传成功的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  //   console.log(uploadFile.raw.name, "9999");
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  form.head = uploadFile.raw.name;
};
//图片上传之前的钩子
// :before-upload="beforeAvatarUpload"
// const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
//   if (rawFile.type !== "image/jpeg") {
//     ElMessage.error("Avatar picture must be JPG format!");
//     return false;
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error("Avatar picture size can not exceed 2MB!");
//     return false;
//   }
//   return true;
// };
// 点击登录
const onSubmit = async () => {
  if (
    form.account == "" ||
    form.password == "" ||
    form.purview == "" ||
    form.name == "" ||
    form.sex == "" ||
    form.idcard == "" ||
    form.phone == "" ||
    form.head == ""
  ) {
    ElMessage.error("请将信息填写完整！");
    return;
  }
  if (form.password != form.password2) {
    ElMessage.error("密码不一致！");
    return;
  }
  //  发送请求
  const res = await usersAddReq(form);
  //   console.log(res);
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
    form.account = "";
    form.password = "";
    form.password2 = "";
    form.purview = "";
    form.name = "";
    form.sex = "";
    form.idcard = "";
    form.phone = "";
    form.head = "";
    imageUrl.value = "";
  } else {
    ElMessage.error(res.data.msg);
  }
};
</script>

<style scoped lang="scss">
.acc_add_box {
  width: 100%;
  height: 100%;
  .acc_add {
    width: 500px;
    height: 100%;
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
